<template>
	<div v-if="detail">
		<NewSearchDetail v-model="visible" :title="title">
			<div class="headimg">

			</div>
			<div class="cont-top">
				<div class="">
					<div class="cont-left">
						<div class="trash-base">
							<div class="detail-title border-bottom-spot">
								基本信息
							</div>
							<div class="base-cont flex j-between a-center">
								<div class="flex a-center">
									<img class="m-r-10" :src="detail.picture ? detail.picture : toiletPicture">
									<div class="item">
										<p style="color: #FFFFFF;font-size: 16px;">
											{{detail.bigTypeName}}-{{ detail.smallTypeName}}
											<span class="status">{{detail.status || '- -'}}</span>
										</p>
										<p class="line1" :title="detail.departName">NO
											:<span>{{detail.number || '- -'}}</span></p>
									</div>
								</div>
								<div class="item">
									<p class="line1" :title="detail.departName">所属机构
										:<span>{{ detail.departName || '- -' }}</span></p>
									<p class="line1" :title="detail.maintain">维护单位
										:<span>{{ detail.maintain || '- -' }}</span></p>
								</div>
								<div class="item">
									<p>责任人:<span>{{ detail.principal || '- -' }}</span></p>
									<p>启用日期:<span>{{ detail.date ? detail.date.split(' ')[0] : '- -' }}</span></p>
								</div>
							</div>
							<div class="base-bottom">
								<Icon custom="i-icon icon-dizhi1" size="18" color="#eee" />
								<span>{{detail.site || '- -'}}</span>
							</div>

						</div>
					</div>
					<div class="trash-left">
						<div class="left-img">
							 <img :src="detail.picture?detail.picture:toiletDetailPicture" :class="{'left-img-pic':detail.picture}">
						</div>
						<div class="dizuo-img"></div>
						<div class="left-btns">
							 <div class="left-btns-item" @click.stop="map = !map">
								<img src="../../../../assets/new/detail_local.png">
								查看位置
							</div>
						</div>
					</div>
				</div>
				<div class="two">
					<div class="cont-right">
						<div class="toilet-right">
							<div class="toilet-right-bottom">
								<div class="bottom-work ">
									<div class="border-bottom-spot work-title ">
										<ul class="wenzi">
											<li style="margin-right:5px;" @click.stop="onClickDetailToiletWork(0)"
												:class="{'current':detailToiletWorkIndex == 0}">配置情况</li>
											<li @click.stop="onClickDetailToiletWork(1)"
												:class="{'current':detailToiletWorkIndex == 1}">/ 作业记录</li>
											<!-- <DatePicker type="date"
					              style="width: 120px"
					              :value='workDate'
					              v-show="detailToiletWorkIndex == 1"
					              @on-change="onChangeDate"></DatePicker> -->

										</ul>
									</div>
									<template>
										<div class="config-cont" v-show="detailToiletWorkIndex == 0">
											<div class="config-cont-item flex">
												<div class="w-p-50 flex">
													<img src="../../../../assets/new/detail_people.png">
													<div class="item-msg">
														<p>{{configData.persontypename || '- -'}}</p>
														<p>{{configData.name || '- -'}}</p>
													</div>
												</div>
												<div class="w-p-50">
													<p>最近检修</p>
													<p>{{configData.work_start_time || '- -'}}</p>
												</div>
											</div>
											<div class="config-cont-item" v-for="(item,index) in configData.equips"
												:key="index">
												<img src="../../../../assets/main/Science.png">
												<div class="item-msg">
													<p>{{item.equiptypename}}</p>
													<p>{{item.equipcode}}</p>
												</div>
											</div>
										</div>

										<div class="work-cont noScroll" v-show="detailToiletWorkIndex == 1">
											<div class="noData" v-if="workRecordArr.length == 0">
												<img src="../../../../assets/new/detail_no.png" class="noData-img">
												<p>暂无数据</p>
											</div>
											<ul class="work-list">
												<li class="work-list-item" v-for="(item,index) in workRecordArr"
													:key="index">
													<div class="time">{{item.createTime}}</div>
													<div class="name">{{item.createName}}</div>
													<div class="cont">
														{{item.content}}
													</div>
													<div class="multimedia">
														<div class="item video-item" v-previewVideo="item.videourl"
															v-if="item.videourl">
															<Icon custom="i-icon icon-bofang" size="25" color='#fff'>
															</Icon>
														</div>
														<div class="item" v-for="(items,indexs) in item.imgurls"
															:key="indexs">
															<el-image :src="items" fit="cover"
																:preview-src-list="[items]" class="detail-top-img"
																v-if="item.imgurls.length != 0">
															</el-image>
														</div>
													</div>
												</li>
											</ul>
										</div>
									</template>
								</div>

							</div>

						</div>
					</div>
					<div class="cont-bottom-right">
						<div class="bottom-half-cont">
							<div class="configuration-title border-bottom-spot">
								<div>传感监测</div>
							</div>
							<div class="noData" v-if="equiArr.length==0">
								<img src="../../../../assets/new/detail_no.png" class="noData-img">
								<p>暂无设备</p>
							</div>
							<ul class="bottom-half-cont-ul">
								<li v-for="(item,k) in equiArr" :key="k" :class="{'light':item.flag==2}">
									<div class="">
										{{item.notes}}
										<img src="../../../../assets/new/new_csjg.png" v-if="item.flag==2">
									</div>
									<div class="">
										{{item.value}}
									</div>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
		</NewSearchDetail>
		<NewPositionDetailModal v-model="map" :address="detail.site" :lng="detail.lng" :lat="detail.lat">
			<div class="modal-cont-title">
				<div class="">
					位置信息
				</div>
				<img src="../../../../assets/new/new_close.png" class="cursor-pointer" @click.stop="map = false">
			</div>
		</NewPositionDetailModal>
	</div>
</template>

<script>
	import bus from '@/utils/bus'
	import NewSearchDetail from "./NewSearchDetail.vue";
	import Echarts from '../../../common/Echarts';
	import {
		formatDate
	} from '@/utils/dateRangUtil';
	import NewPositionDetailModal from '../new/NewPositionDetailModal.vue'
	export default {
		components: {
			NewSearchDetail,
			Echarts,
			NewPositionDetailModal
		},
		data() {
			return {
				visible: false,
				dataId: '',
				title: '',
				detail: {},
				equiArr: [],
				detailToiletWorkIndex: 0,
				historyTrendVisible: false,
				device: '1',
				deviceList: [{
					label: '人流量检测设备20210002',
					value: 1
				}],
				timeSelect: 'week',
				timeSelectList: [{
					label: '近一周',
					value: 'week'
				}, {
					label: '近一月',
					value: 'month'
				}, {
					label: '近一年',
					value: 'year'
				}],
				meanCheckbox: '',
				slOptions: {
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['05-01', '05-04', '05-07', '05-10', '05-13', '05-16', '05-19']
					},
					yAxis: {
						type: 'value',
						data: [0, 20, 40, 60, 80, 100],
						splitLine: {
							show: false
						}
					},
					series: [{
						data: [68, 28, 68, 70, 80, 100, 65, 40, 44],
						type: 'line',
						areaStyle: {
							color: '#517976'
						},
						itemStyle: {
							color: '#517976'
						}
					}],
					grid: {
						x: 0,
						y: 0,
						x2: 0,
						y2: 0,
						borderWidth: 0
					},
				},
				toiletPicture: require('../../../../assets/new/detail_Manhole.png'),
				toiletDetailPicture: require('../../../../assets/new/ManholeImg.png'),
				// 作业日历
				workRecordArr: [],
				workDate: '',
				configData: {},
				map: false
			}
		},
		watch: {
			dataId(newVal) {
				if (newVal) {
					this.getDetail()
					this.getTotalConfig()
				}
			},
			visible(newVal) {
				if (!newVal) {
					this.dataId = ''
					this.equiArr = []
					this.detailToiletWorkIndex = 0
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				bus.$on('showMainSearchManholeDetail', data => {
					this.dataId = data.id
					this.title = data.title
					this.visible = true
				})
				this.workDate = formatDate(new Date)
			},
			getDetail() {
				this.$store.dispatch('getFacilityDetail', this.dataId).then(res => {
					this.detail = res
					let arr = res.lnglat.split(',')
					this.detail.lng = arr[0]
					this.detail.lat = arr[1]
					console.log(res)
					if (this.detail.status == 0) {
						this.detail.status = '正常'
					} else if (this.detail.status == 1) {
						this.detail.status = '废弃'
					} else if (this.detail.status == 2) {
						this.detail.status = '维修'
					} else if (this.detail.status == 3) {
						this.detail.status = '拆除'
					} else if (this.detail.status == 4) {
						this.detail.status = '暂停'
					}
					// 使用详情接口返回的绑定账号的id
					if (this.detail.principalId) {
						this.getWorkRecordList(this.detail.principalId)
					}
				})

				let paramsFaclid = {
					faclid: this.dataId
				}

				this.$http.getManholeCoverByFaclId(paramsFaclid).then((res) => {
					console.log(res, 222)
					if (res.code == 200) {
						this.equiArr = res.result
					}
				})
			},
			// 获取配置情况
			getTotalConfig() {
				console.log(11111)
				let params = {
					id: this.dataId
				}
				this.$http.getMapTotalConfig(params).then((res) => {
					console.log(res);
					if (res.code === 200) {
						console.log(res,22222222222)
						this.configData = res.result
					}
				})
			},
			// 公厕详情 工作tab切换
			onClickDetailToiletWork(i) {
				this.detailToiletWorkIndex = i
			},
			onClickHistoryTrend() {
				this.historyTrendVisible = true
			},
			// 选择日期
			onChangeDate(date) {
				this.workDate = date
			},
			// 获取作业记录
			getWorkRecordList(id) {
				let params = {
					pageNum: 1,
					pageSize: 99999,
					uId: id,
					nowtime: this.workDate,
				}
				this.$http.getMapWorkRecordList(params).then(res => {
					if (res.code == 200) {
						console.log(res)
						this.workRecordArr = res.result.result.rows.map(item => {
							item.imgurls = item.imgurls.split(',').filter(items => items)
							return item
						})
					}
				})
			},
			// 摄像头
			onClickVideo() {
				if (this.detail.videoonlinestatus == 0) {
					let params = {
						equipcode: this.detail.equipcode,
						eqptype: this.detail.eqptype,
						details: this.detail.channels,
					}
					bus.$emit('showPlayVideoModal', params)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/iviewCssReset/input";
	@import "@/scss/iviewCssReset/modal";
	@import "@/scss/iviewCssReset/select";

	::v-deep {
		.ivu-modal-body {
			padding: 0;
		}
	}

	.modal-cont-title {
		height: 77px;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32px 50px 0 60px;

		img {
			width: 20px;
			height: 20px;
		}
	}

	// .headimg {
	//   width: 1863px;
	//   height: 105px;
	//   background-image: url(../../../../assets/new/wctop.png);
	//   background-size: 100% 100%;
	// }
	.cont-top {
		display: flex;
		align-items: center;

	}

	.cont-left {
		position: relative;
		width: 746px;
		height: 232px;
		background-image: url(../../../../assets/new/detail_232.png);
		background-size: 100% 100%;
		overflow: hidden;
	}

	.cont-right {
		width: 454px;
		height: 439px;
		background-image: url(../../../../assets/new/detail_439.png);
		background-size: 100% 100%;
	}

	.toilet-right {
		.toilet-right-bottom {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 350px;

			.bottom-work {
				margin-bottom: 20px;

				.work-title {
					background-image: url(../../../../assets/new/titleboxbig.png);
					width: 366px;
					height: 46px;
					background-size: 100% 100%;
					margin-left: 14px;
					margin-top: 17px;
					line-height: 45px;

					ul {
						display: flex;
						align-items: center;
						flex: 1;
						padding-left: 20px;
						padding: 1px 10px;
						line-height: 45px;
						margin-left: 10px;

						li {
							font-size: 16px;
							color: #fff;
							cursor: pointer;
						}

						.current {
							font-weight: bold;
							color: #23cefd;
							cursor: pointer;
						}
					}
				}

				.work-cont {
					padding: 16px;
					color: #999;
					box-sizing: border-box;
					max-height: 300px;
					overflow-y: auto;

					.work-list-item {
						margin-bottom: 20px;

						.time {
							font-size: 18px;
							color: #fff;
							margin-bottom: 10px;
						}

						.name {
							font-style: 16px;
							color: #999999;
						}

						.cont {
							font-style: 16px;
							color: #999999;
							margin-bottom: 10px;
						}

						.multimedia {
							display: flex;
							flex-wrap: wrap;

							.item {
								width: 32%;
								margin-right: 2%;

								img {
									width: 100%;
								}
							}

							.item:nth-child(3n) {
								margin-right: 0;
							}

							.video-item {
								position: relative;
								background: #797979;

								i {
									position: absolute;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
								}
							}
						}
					}
				}
			}

			.config-cont::-webkit-scrollbar {
				width: 5px;
			}

			.config-cont::-webkit-scrollbar-thumb {
				background-color: #CCCCCC;
			}

			// 配置情况
			.config-cont {
				width: 445px;
				overflow-y: auto;
				max-height: 265px;
				// margin-bottom: 10px;
				font-size: 16px;
				padding: 16px;

				.config-cont-item {
					display: flex;
					color: #eee;
					margin-bottom: 20px;
					margin-left: 25px;


					img {
						width: 46px;
						height: 46px;
						border-right: 50%;
						margin-right: 10px;
						cursor: default;

					}

					.item-msg {
						height: 46px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}
				}

				.config-cont-item:last-child {
					margin-bottom: 10px;
				}
			}

			// 传感检测
			.cont-bottom-right {
				margin-top: 11px;
			}

			.climate-list {
				font-size: 16px;
				color: #ffffff;
				line-height: 36px;
			}

			.climate-list li {
				margin-left: 35px;
				margin-top: 11px;
			}

			.climatedate-list {
				font-size: 16px;
				color: #ffffff;
				line-height: 36px;
				padding-top: 1px;
			}

			.climatedate-list li {
				margin-left: 336px;
				margin-top: 11px;
			}

			.popup-title {
				div {
					margin-right: 20px;
				}
			}

			.bottom-half-cont-cont {
				.cont-tab {
					display: flex;
					background: linear-gradient(to right,
							rgba(255, 255, 255, 0.1) 30%,
							rgba(255, 255, 255, 0) 100%);
					padding: 0 20px;
					box-sizing: border-box;
					height: 32px;

					span {
						color: #fff;
						display: block;
						box-sizing: border-box;
						height: 100%;
						line-height: 2;
						margin-right: 30px;
						cursor: pointer;
					}

					.current {
						color: #25bb96;
					}
				}


				.sensor-list {
					padding: 30px 20px;
					font-size: 16px;

					.sensor-list-item {
						display: flex;
						justify-content: space-between;
						margin-bottom: 30px;
						color: #fff;
					}

					.sensor-list-item:last-child {
						margin-bottom: 0;
					}

					// display: flex;
					// flex-wrap: wrap;
					// height: 179px;
					// padding-right: 8px;
					// overflow-y: auto;
					// padding-top: 11px;
					// box-sizing: border-box;
					// .sensor-list-item {
					//   width: calc(33.3% - 8px);
					//   height: 64px;
					//   margin-left: 8px;
					//   border: 1px solid;
					//   border-image: linear-gradient(34deg, #535d64, #77858e, #4b555d) 1 1;
					//   margin-top: 13px;
					//   display: flex;
					//   flex-wrap: wrap;
					//   align-items: center;
					//   align-content: center;
					//   color: rgba(255, 255, 255, 0.2);
					//   label {
					//     display: block;
					//     width: 100%;
					//     text-align: center;
					//     color: rgba(255, 255, 255, 0.85);
					//     margin-bottom: 10px;
					//   }
					//   span {
					//     font-size: 16px;
					//     font-weight: bold;
					//     color: #fff;
					//     display: block;
					//     width: 100%;
					//     text-align: center;
					//   }
					// }
				}
			}
		}

		.toilet-right-flow {
			width: 455px;
			height: 271px;
			background-image: url(../../../../assets/new/wc-border2.png);
			background-size: 100% 100%;

			.toilet-right-flow-row1 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.toilet-right-flow-row1-right {
					line-height: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(255, 255, 255, 0.3);
					color: rgba(255, 255, 255, 0.65);
					padding: 4px;
					border-radius: 2px;

					font-size: 14px !important;
					margin-top: 10px;
					margin-right: 10px;
					cursor: pointer;
				}
			}

			.toilet-right-flow-row2 {
				font-size: 16px;
				color: #fff;

				.toilet-list {
					li {
						// width: 221px;
						height: 50px;
						background: #1eb0fc;
						background-size: 100% 100%;
						opacity: 0.3;

						.title {
							padding: 15px 20px;

						}

						div {
							padding: 30px;
							width: 227px;
							height: 188px;
							// border: 1px solid #1fb9d9;
						}
					}

					li:last-child {
						border-right: 0;
					}
				}
			}
		}
	}

	.two {}

	.trash-left {
		// position: absolute;

		width: 746px;
		height: 524px;
		margin-right: 7px;
		background-image: url(../../../../assets/new/detail_524.png);
		background-size: 100% 100%;
		margin-top: 11px;

		.left-img {
			display: flex;
			justify-content: center;
			margin-top: 10px;
			margin-right: 82px;
			padding: 0 30px;
			width: 100%;

			img {
				max-width: 680px;
				margin: 160px 0 70px;
				height: 171px;
			}
			.left-img-pic{
				height: 300px;
				margin: 70px 0 50px;
			}
		}

		.icon-little {
			position: relative;
			margin-right: 30px;

			.run-condition {
				position: absolute;

				padding: 11px 0;
				width: 97%;
				margin: 0 auto;

				li {
					flex: 1;

					p {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					p:first-child {
						font-size: 16px;
						color: rgba(255, 255, 255, 0.65);
						margin-bottom: 12px;

						span {
							margin-left: 4px;
						}
					}

					p:last-child {
						color: #fff;

						label {
							font-size: 24px;
							font-weight: 600;
							margin-bottom: 12px;
							margin-right: 7px;
						}
					}
				}
			}
		}

		.left-btns {
			display: flex;
			justify-content: space-around;
			margin: auto;

			.left-btns-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120px;
				height: 45px;
				font-size: 14px;
				background-size: 100%;
				color: #ffffff;
				cursor: pointer;
				line-height: 45px;
				background: rgba(30, 176, 252, 0.35);
				border: 1px solid #1eb0fc;
				border-radius: 4px;

				img {
					width: 20px;
					height: 20px;
					margin-right: 5px;
				}

				.ivu-icon {
					line-height: 2;
				}
			}
		}
	}

	.trash-base {
		// background-image: url(../../../../assets/new/titlebox.png);

		.base-cont {
			display: flex;
			padding: 18px 34px;
			color: rgba(255, 255, 255, 0.7);
			line-height: 14px;

			img {
				width: 61px;
				height: 60px;
				border-radius: 50%;
			}

			.item {
				height: 60px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				line-height: 1;

				p {
					span {
						color: #eee;
						margin-left: 5px;
						font-size: 14px;
						padding: 10px;
					}
				}
			}

			.status {
				background: rgba(30, 176, 252, 0.35);
				border: 1px solid #1EB0FC;
				color: #1EB0FC !important;
				border-radius: 4px;
				display: inline-block;
				width: 50px;
				height: 24px;
				margin-left: 5px !important;
				font-size: 12px;
				line-height: 24px;
				text-align: center;
				padding: 0 !important;
			}
		}

		.base-bottom {
			display: flex;
			align-items: center;
			width: 746px;
			height: 68px;
			padding-left: 32px;
			color: #a0a0a0;
			background-image: url(../../../../assets/new/rectangular.png);
			background-size: 100% 100%;
			position: absolute;
			bottom: 0;
			left: 0;

			span {
				margin-left: 4px;
				color: #ffffff;
				font-size: 16px;
			}
		}
	}

	.configuration-title {
		line-height: 45px;
		color: #ffffff;
		font-size: 16px;
		padding-left: 20px;
		background-image: url(../../../../assets/new/titleboxbig.png);
		width: 366px;
		height: 46px;
		background-size: 100% 100%;
		margin-left: 14px;
		margin-top: 17px;
	}

	.detail-title {
		line-height: 45px;
		color: #23cefd;
		font-size: 16px;
		padding-left: 20px;
		background-image: url(../../../../assets/new/titlebox.png);
		width: 206px;
		height: 46px;
		background-size: 100% 100%;
		margin-left: 9px;
		margin-top: 10px;
	}

	.border-top-spot {
		// border-top: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
	}

	.border-top-spot::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		box-sizing: border-box;
		border-left: 3px solid #fff;
		border-right: 3px solid #fff;
		background: rgba(255, 255, 255, 0.1);
	}

	.border-bottom-spot {
		// border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;

	}

	.border-bottom-spot::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.1);
	}

	// modal
	.history-trend {
		.history-trend-title {
			height: 54px;
			display: flex;
			align-items: center;
			color: #ffffff;
			padding-left: 30px;
			background: #3a3c3e;
		}

		.history-trend-cont {
			height: 564px;
			padding: 16px 30px 26px 30px;
			background: rgba(48, 50, 51, 0.3);

			.cont {
				background: #3a3c3e;

				.cont-title {
					display: flex;
					align-items: center;
					height: 78px;
					margin: 0 40px;
					margin-bottom: 20px;
					border-bottom: 1px solid rgba(255, 255, 255, 0.08);

					div {
						flex: 1;

						p {
							margin-bottom: 8px;
							color: rgba(255, 255, 255, 0.65);
						}

						span {
							font-size: 12px;
							color: rgba(255, 255, 255, 0.4);

							span {
								font-size: 20px;
								color: #fff;
								margin-right: 4px;
							}
						}
					}
				}
			}
		}
	}

	.bottom-half-cont {
		width: 455px;
		height: 323px;
		background-image: url(../../../../assets/new/wc-border2.png);
		background-size: 100% 100%;
		margin-top: 10px;
		overflow: hidden;
	}

	.toilet-right-flow {
		width: 455px;
		height: 271px;
		background-image: url(../../../../assets/new/wc-border2.png);
		background-size: 100% 100%;
		margin-top: 10px;
		overflow: hidden;
	}

	.climate {
		display: flex;
		font-size: 16px;
		color: #ffffff;
		line-height: 48px;
		margin-left: 35px;
		margin-top: 5px;
	}

	.climate-list li {
		margin-right: 250px;
	}

	.toilet-right-flow-row2 {
		font-size: 16px;
		color: #fff;
		margin: 0 6px;
	}

	.toilet-list li {
		height: 194px;
	}

	.toilet-list li .title {
		// width: 221px;
		height: 50px;
		font-size: 16px;
		background: rgba(30, 176, 252, .3);
		line-height: 50px;
		padding-left: 20px;

	}

	.toilet-list li:first-child {
		border-right: 1px solid rgba(30, 176, 252, .5);
	}

	.icon-little {
		margin-right: 30px;
		// display: flex;

	}

	.run-condition {
		position: absolute;
		display: flex;
		margin-left: 27px;
		margin-top: 68px;
	}

	// .work-title {
	//         background-image: url(../../../../assets/new/titleboxbig.png);
	//         width: 366px;
	//         height: 46px;
	//         background-size: 100% 100%;
	//         margin-left: 14px;
	//         margin-top: 17px;
	//         line-height: 45px;
	// } 
	.configuration-title {
		line-height: 46px;
		color: #ffffff;
		font-size: 16px;
		padding-left: 20px;
		background-image: url(../../../../assets/new/titleboxbig.png);
		width: 366px;
		height: 46px;
		background-size: 100% 100%;
		margin-left: 14px;
		margin-top: 17px;
	}

	.m-b-20 {
		margin-left: 29px;
		margin-top: 19px;

	}

	.border {
		// width: 0px;
		height: 154px;
		border: 1px solid #1FB9D9;
	}

	.border-two {
		height: 154px;
		border: 1px solid #1FB9D9;
	}

	.tubiao {
		display: flex;
		margin-right: 75px;
		margin-left: 12px;
		align-items: center;

	}

	.tubiao p {
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 36px;
	}

	.tubiao label {
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 36px;
	}

	.tubiao div {
		margin-left: 8px;
	}

	.noData {
		.noData-img {
			width: 160px;
			height: 160px;
			margin: 0;
		}

		p {
			font-size: 16px;
		}
	}

	.bottom-half-cont-ul {
		height: 220px;
		overflow: auto;

		li {
			height: 36px;
			font-size: 16px;
			color: #FFFFFF;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 10px 20px;
			padding: 0 14px;

			div:first-child {
				display: flex;
				align-items: center;

				img {
					width: 14px;
					height: 14px;
					margin-left: 5px;
				}
			}
		}

		.light {
			background-image: linear-gradient(to right, rgba(255, 51, 51, .8), rgba(255, 51, 51, 0));
		}
	}

	.map {
		width: 200px;
		height: 50px;
	}
</style>
